<template>
  <section class="todoapp">
    <todo-header @hTaskname="hTashadd"></todo-header>
    <todo-main
      :list="showList"
      @DelTask="hDeltask"
      @changeTask="hChangeTask"
      @isAll='isAll'
    ></todo-main>

    <todo-footer
      :list="showList"
      @clearDone="hClearDone"
      @hClear="hClearType"
    ></todo-footer>
  </section>
</template>

<script>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
export default {
  components: { TodoFooter, TodoMain, TodoHeader },
  data() {
    return {
       type:'all',
      list:JSON.parse(localStorage.getItem('list')),
     
    };
  },
  watch:{
    list:{
      handler(){
        localStorage.setItem('list',JSON.stringify(this.list))
      },
      deep:true
      
    }

  },
  methods: {
    hDeltask(id) {
      let index = this.list.findIndex((itme) => itme.id === id);
      this.list.splice(index, 1);
    },
    hChangeTask(id) {
      let itme = this.list.find((itme) => itme.id === id);
      itme.isDone=!itme.isDone
    },
    hTashadd(taskName){

      this.list.push({
        id:Date.now(),
        name:taskName,
        isDone:false
      })

    },
    hClearDone(){
      this.list=this.list.filter(itme=>!itme.isDone)
    },
    hClearType(type){
      
    this.type=type
  },
  isAll(val){
    this.list.forEach(itme=>itme.isDone=val)
  }
 
  },
  computed:{
    showList(){
     
     if(this.type==='yes'){
     return this.list.filter(itme=>itme.isDone===true)
     }else if(this.type==='on'){
     return this.list.filter(itme=>itme.isDone===false)
     }else{
      return this.list
     }
    }
  }
  
  
};
</script>

<style></style>
